<template>
  <div class="home">
    <div class="search">
      <input type="text" v-model="searchVal" />
      <div class="searchBtn" @click="handleSeach">搜索</div>
    </div>
    <div class="areaCategory">
      <div class="area-item" v-for="(item, index) in areaList" :key="index" @click="handleArea(item)">
        <div class="imgBox">
          <img :src="assets[item.value]" alt="" />
        </div>
        <div class="name">{{ item.label }}</div>
      </div>
      <div class="area-item"></div>
    </div>
    <div class="recommendArea">
      <div class="title">
        <div class="text">人气推荐</div>
        <!-- <div class="more">更多 ></div> -->
      </div>
      <div class="recommendList">
        <div class="recommend-item" v-for="(item, index) in recommendList" :key="index"
          @click="handleRecommendClick(item)">
          <div class="imgBox">
            <img :src="assetsUrl + item.dishesImageUrl" alt="" />
          </div>
          <div class="name">{{ item.dishesName }}</div>
          <div class="address">{{ item.businessAddress || "暂无地址" }}</div>
          <div class="edit">
            <div class="price">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </div>

    <div class="foodList">
      <div class="foodRecommend">
        <div v-for="(item, index) in itemList" :class="[
          'foodRecommendItem',
          item.value == activeItemVal ? 'activeItemVal' : '',
        ]" :key="index" @click="handleItem(item)">
          {{ item.label }}
        </div>
      </div>
      <div class="food" v-for="(item, index) in foodList" :key="index" @click="handleFoodItem(item)">
        <div class="imgBox">
          <img :src="assetsUrl + item.dishesImageUrl" alt="" />
        </div>
        <div class="info">
          <div class="name">{{ item.dishesName }}</div>
          <van-rate v-model="item.score" :size="25" color="#ff3e14" void-icon="star" void-color="#eee" />
          <div class="note">
            <!-- 本校区热销第{{ item.salesRanking < 0 ? "1" : item.salesRanking }} </div> -->
            热销第{{ index + 1 }}
          </div>
          <div class="vote">{{ comment || "服务员态度良好" }}</div>
          <div class="price">
            <span class="priceVal">￥{{ item.price }}</span>
            <span class="min">{{ item.min }}</span>
            <span class="long">{{ Math.ceil(Math.random(0, 1) * 100) + 20 }}米</span>
          </div>
        </div>
      </div>
    </div>
    <!-- <div class="editBar">
                <div class="homeBar" @click="handlePath('0')">
                    <i class="el-icon-s-home"></i>
                    <div class="text">首页</div>
                </div>
                <div class="order" @click="handlePath('1')">

                    <i class="el-icon-tickets"></i>
                    <div class="text">订单</div>
                </div>
                <div class="my" @click="handlePath('2')">
                    <i class="el-icon-s-custom"></i>
                    <div class="text">我的</div>
                </div>
            </div> -->
    <van-tabbar v-model="active" @change="onChange">
      <van-tabbar-item icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item icon="search">订单</van-tabbar-item>
      <van-tabbar-item icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
import { getHotGoods, getGoodsType, getCategoryList } from "@/api/reception";
import { Toast } from "vant";
export default {
  data() {
    return {
      assets: {
        kunming: require("@/assets/img/dingcan/kunming.png"),
        qujing: require("@/assets/img/dingcan/qujing.png"),
        yuxi: require("@/assets/img/dingcan/yuxi.png"),
        zhaotong: require("@/assets/img/dingcan/zhaotong.png"),
        baoshan: require("@/assets/img/dingcan/baoshan.png"),
        puer: require("@/assets/img/dingcan/puer.png"),
        lincang: require("@/assets/img/dingcan/lincang.png"),
        xsbn: require("@/assets/img/dingcan/xsbn.png"),
        dali: require("@/assets/img/dingcan/dali.png"),
      },
      active: 0,
      assetsUrl: "",
      searchVal: "",
      areaList: [
        {
          label: "昆明",
          value: "kunming",
        },
        {
          label: "曲靖",
          value: "qujing",
        },
        {
          label: "玉溪",
          value: "yuxi",
        },
        {
          label: "昭通",
          value: "zhaotong",
        },
        {
          label: "保山",
          value: "baoshan",
        },
        {
          label: "普洱",
          value: "puer",
        },
        {
          label: "临沧",
          value: "lincang",
        },
        {
          label: "西双版纳",
          value: "xsbn",
        },
        {
          label: "大理自治州",
          value: "dali",
        },
      ],
      recommendList: [],
      itemList: [
        {
          label: "全部",
          value: "",
        },
        {
          label: "超值快餐",
          value: "超值快餐",
        },
      ],
      foodList: [],
      activeItemVal: "",
    };
  },

  mounted() {
    this.assetsUrl = process.env.VUE_APP_ASSETSURL;
    // 获取人气推荐
    this.getHotGoodList();
    // 获取菜品分类列表
    this.getGoodsTypeList();
    this.getCategoryList();
  },

  methods: {
    handleArea(item) {
      console.log(item);
      const arr = this.foodList.filter(_item => {
        if (item.value == _item.area) {
          return true
        }
      })
      console.log(arr, 'ar');
      if (arr.length == 0) {
        Toast('暂无数据');
      } else {
        this.$router.push({
          path: '/orderHome/foodList',
          query: {
            foodList: arr
          },
        })
      }

    },
    async getCategoryList() {
      const res = await getCategoryList();
      console.log(res, "a");
      this.itemList = res.data.map((item) => {
        return {
          label: item,
          value: item,
        };
      });
      this.itemList.unshift({
        label: "全部",
        value: "",
      });
    },
    async getGoodsTypeList() {
      let data = {
        page: {
          pageNum: 1,
          pageSize: 1000,
        },
        param: {
          categoryName: this.activeItemVal,
        },
      };

      const res = await getGoodsType(data);
      this.foodList = res.data.map((item) => {
        return {
          ...item,
          score: item.score || "4.5",
        };
      });
      console.log(this.foodList, "datra");
    },
    async getHotGoodList() {
      let data = {
        page: {
          pageNum: 1,
          pageSize: 10,
        },
        param: {
          keyWord: "",
        },
      };
      const res = await getHotGoods(data);
      this.recommendList = res.data;

      console.log(res, "rrrrr");
    },
    handleSeach() {
      console.log(this.searchVal, 'sea');
      const arr = this.foodList.filter(item => {
        if (item.dishesName.includes(this.searchVal)) {
          return item
        }
      })
      this.$router.push({
        path: '/orderHome/foodList',
        query: {
          foodList: arr
        },
      })
    },
    handleItem(item) {
      this.activeItemVal = item.value;
      this.getGoodsTypeList();
    },
    handleFoodItem(item) {
      this.$router.push({
        path: "/orderHome/business",
        query: {
          dishesId: item.dishesId,
        },
      });
    },
    handleRecommendClick(item) {
      this.$router.push({
        path: "/orderHome/business",
        query: {
          dishesId: item.dishesId,
        },
      });
    },

    onChange(flag) {
      this.active = flag;
      if (flag == "0") {
        this.$router.push("/orderHome/receptionHome");
      } else if (flag == "1") {
        this.$router.push("/orderHome/orderManage");
      } else if (flag == "2") {
        this.$router.push("/orderHome/myCenter");
      }
    },
  },
};
</script>

<style lang="less" scoped>
.home {
  height: 100%;
  padding: 15px;
  background-color: #f5f5f5;

  .search {
    height: 35px;
    position: relative;
    margin-bottom: 15px;

    input {
      width: 100%;
      height: 100%;
      border: 3px solid #ff3e14;
      border-radius: 15px;
    }

    .searchBtn {
      position: absolute;
      width: 80px;
      height: 35px;
      border-radius: 15px;
      background: linear-gradient(to right, #ff4932, #ff7455);
      color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;
      right: 0;
      top: 0;
    }
  }

  .areaCategory {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    background-color: #fff;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

    .area-item {
      width: 70px;
      height: 70px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      .imgBox {
        width: 30px;
        height: 30px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .name {
        font-size: 12px;
      }
    }
  }

  .recommendArea {
    .title {
      display: flex;
      justify-content: space-between;
      align-items: center;
      height: 40px;

      .text {
        font-weight: 700;
      }

      .more {
        font-size: 12px;
        color: #999;
      }
    }
  }

  .recommendList {
    width: 100%;
    height: 250px;
    overflow-x: auto;
    display: flex;
    margin-top: 15px;

    &::-webkit-scrollbar {
      display: none;
    }

    .recommend-item {
      height: 100%;
      display: flex;
      flex-direction: column;
      margin-right: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      // width: 50%;
      background-color: #fff;
      width: 233px;
      border-radius: 15px;

      .imgBox {
        display: flex;
        justify-content: center;

        img {
          width: 120px;
          height: 120px;
        }
      }

      .name {
        font-weight: 600;
        margin-top: 8px;
        margin-bottom: 5px;
      }

      .address {
        font-size: 14px;
        color: #999;
        text-wrap: nowrap;
        text-overflow: ellipsis;
        margin-bottom: 12px;
      }

      .edit {
        .price {
          color: #ff3e14;
          font-weight: 600;
        }
      }
    }
  }

  .foodList {
    display: flex;
    flex-direction: column;
    padding-bottom: 40px;

    .foodRecommend {
      display: flex;
      margin: 15px 0;
      overflow-x: auto;
      // height: 40px;


      .foodRecommendItem {
        width: 80px;
        min-width: 80px;
        height: 35px;
        text-align: center;
        line-height: 35px;
        border-radius: 15px;
        border: 1px solid #999;
        color: #999;
        margin-right: 15px;
      }

      .activeItemVal {
        background-color: #ff3e14;
        color: #fff;
        border: none;
      }
    }

    .foodRecommend {
      // height: 300px;
      overflow-x: hidden;
      overflow-x: auto;
    }

    .foodRecommend::-webkit-scrollbar {
      display: none;
    }

    .food {
      display: flex;
      padding: 15px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-bottom: 15px;
      background-color: #fff;

      .imgBox {
        width: 118px;
        height: 118px;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .info {
        flex: 1;
        margin-left: 15px;

        .name {
          font-weight: 700;
        }

        .note {
          height: 20px;
          line-height: 20px;
          text-align: center;
          border-radius: 4px;
          border: 1px solid #ff3e14;
          color: #ff3e14;
          font-size: 12px;
          width: 50%;
        }

        .vote {
          margin: 5px 0;
          font-size: 12px;
          color: #999;
        }

        .price {
          display: flex;
          align-items: center;

          .priceVal {
            font-weight: 700;
            color: #ff3e14;
          }

          .min {
            margin-left: auto;
            margin-right: 8px;
          }

          .min,
          .long {
            font-size: 12px;
            color: #999;
          }
        }
      }
    }
  }

  .editBar {
    position: fixed;
    display: flex;
    bottom: 0;
    width: 100%;
    height: 60px;
    // background-color: red;
    justify-content: space-between;
    align-items: center;
    background-color: #fff;

    .my {
      margin-right: 28px;
    }

    .home .order .my {
      display: flex;
      align-items: center;
      justify-content: center;
    }
  }
}
</style>
